import useEvent from '@/hooks/useEvent';
import { GStyleSheet } from '@/utils/DarkMode';
import { Text, View } from '@tarojs/components';
import I18n from 'i18n-js';
import React from 'react';

const dstyles = GStyleSheet.create({
  container: {
    padding: '0 32rpx',
    marginTop: 26,
  },
  contact: {
    background: '#F7F7F7',
    borderRadius: 4,
    margin: '30rpx 0',
    display: 'flex',
    alignItems: 'center',
    height: 84,
  },
  content: {
    flex: 1,
    paddingLeft: 20,
    fontSize: 16,
  },
  nickname: {
    marginBottom: 6,
  },
  remove: {
    color: '#EA1B1B',
    fontSize: 16,
    padding: 16
  }
});

interface IContact {
  id: number
  nickname: string;
  mobile: string;
  onRemove(id: number): void;
}

const Contact: React.FC<IContact> = React.memo(({
  id,
  nickname,
  mobile,
  onRemove,
}) => {
  const handlePress = useEvent(() => onRemove(id));
  const styles = dstyles.style;
  return (
    <View style={styles.contact}>
      <View style={styles.content}>
        <View style={styles.nickname}>{nickname}</View>
        <View>{mobile}</View>
      </View>
      <Text style={styles.remove} onClick={handlePress}>{I18n.t('DELETE')}</Text>
    </View>
  )
});

interface Props {
  data: (Omit<IContact, 'onRemove'>)[],
  onRemove(id: number): void;
}

const ContactList: React.FC<Props> = React.memo(({
  data,
  onRemove
}) => {
  const styles = dstyles.style;

  return (
    <View style={styles.container}>
      {
        data.map((c) => (
          <Contact key={c.id} {...c} onRemove={onRemove} />
        ))
      }
    </View>
  );
});

export default ContactList;
